import './index.css';

import { Image } from '@nutui/nutui-react';
import dayjs from 'dayjs';
import { parse } from 'querystring';
import { useEffect, useMemo } from 'react';

import { useGlobal } from '@/application/context/global';
import { useUser } from '@/application/hooks/use-user';

import Action from './components/Action';
import CardList from './components/CardList';
import { Floating } from './components/Floating';
import ShareActionSheet from './components/ShareActionSheet';
import TaskList from './components/TaskList';
import { HomeProvider } from './context';
const Home = () => {
  const { activityInfo, goodInfo } = useGlobal();

  const activeDate = useMemo(() => {
    return [activityInfo?.startDate, activityInfo?.endDate]
      .filter(Boolean)
      .map((i) => dayjs(i).format('YYYY.MM.DD'))
      .join('-');
  }, [activityInfo]);

  const { loginAsync } = useUser();
  useEffect(() => {
    const res = window.location.search.replace('?', '');
    const { gmSsoParams = '' } = parse(res);
    loginAsync && loginAsync({ encrypt: decodeURIComponent(gmSsoParams as string) });
  }, []);
  return (
    <HomeProvider>
      <div className="home relative min-h-screen break-all safe-bottom">
        <Image
          src={new URL('/images/home/bg_home.png', import.meta.env.VITE_IMG_BASE_URL).href}
          className="!absolute h-[560px] w-full"
        />
        <Floating />
        <div className="z-1 relative top-24.5">
          <div className="mx-auto flex h-6 w-fit  items-center rounded-full bg-[#FFFC86] px-3.75 text-sm text-[#008C0D]">
            本期活动：{`${activeDate}`}
          </div>
          <div className="active-content mt-2">
            <div className="absolute left-0 right-0 top-19 text-center font-medium text-[#105506]">
              {goodInfo?.goodsName}
            </div>
            <CardList />

            <Action />
          </div>
        </div>
        {activityInfo?.activityDescribe && (
          <div className="relative mx-3.75 mt-28.75 rounded-[15px] bg-[#F7FFD8] px-3.75 pb-11.75">
            <Image
              src={
                new URL('/images/home/img_home_ruletitle.png', import.meta.env.VITE_IMG_BASE_URL)
                  .href
              }
              className="absolute -top-2.75 left-0 right-0 mx-auto h-10.5 w-46"
            />
            <div
              className="home-detail text-sm text-[#3F3F3F]"
              dangerouslySetInnerHTML={{
                __html: activityInfo?.activityDescribe
              }}
            ></div>
          </div>
        )}

        <TaskList />
        <ShareActionSheet />
      </div>
    </HomeProvider>
  );
};
export default Home;
